"use client";

import { animate, motion, useMotionValue, useTransform } from "motion/react";
import { useEffect } from "react";

export default function CountUp({
  value,
  className,
  duration = 1,
  Component = "span",
}: {
  value: number;
  className?: string;
  Component?: React.ElementType;
  duration?: number;
}) {
  const count = useMotionValue(0);
  const MotionComponent = motion.create(Component);
  const rounded = useTransform(() => Math.round(count.get()));
  useEffect(() => {
    const controls = animate(count, value, { duration: duration });
    return () => controls.stop();
  }, [count, duration, value]);
  return <MotionComponent className={className}>{rounded}</MotionComponent>;
}
